<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="批次号" prop="batchNo">
          <el-input
              v-model="queryParams.batchNo"
              placeholder="批次号"
              clearable
              @keyup.enter="handleQuery()"
          />
        </el-form-item>
        <el-form-item label="工序类型" prop="workType">
          <dict v-model="queryParams.workType" code="work_type"/>
        </el-form-item>
        <el-form-item label="记录时间" prop="createTime">
          <el-date-picker
              v-model="queryParams.createTime"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon>
              <Search/>
            </template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon>
              <Refresh/>
            </template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="mb-10px">
        <el-button
            v-hasPerm="['system:sysDianciFinishedRetrospect:add']"
            type="success"
            @click="handleOpenDialog()"
        >
          <template #icon>
            <Plus/>
          </template>
          新增
        </el-button>
        <el-button
            v-hasPerm="['system:sysDianciFinishedRetrospect:delete']"
            type="danger"
            :disabled="removeIds.length === 0"
            @click="handleDelete()"
        >
          <template #icon>
            <Delete/>
          </template>
          删除
        </el-button>
      </div>

      <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="pageData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column
            key="batchNo"
            label="批次号"
            prop="batchNo"
            min-width="150"
            align="center"
        />
        <el-table-column label="工序类型" width="150" align="center">
          <template #default="scope">
            <DictLabel v-model="scope.row.workType" code="work_type"/>
          </template>
        </el-table-column>

        <!--        <el-table-column-->
        <!--            key="userId"-->
        <!--            label="操作人ID"-->
        <!--            prop="userId"-->
        <!--            min-width="150"-->
        <!--            align="center"-->
        <!--        />-->
        <!--        <el-table-column-->
        <!--            key="json"-->
        <!--            label="json数据"-->
        <!--            prop="json"-->
        <!--            min-width="150"-->
        <!--            align="center"-->
        <!--        />-->
        <el-table-column
            key="createTime"
            label="记录时间"
            prop="createTime"
            min-width="200"
            align="center"
        />
        <el-table-column
            key="userName"
            label="操作人"
            prop="userName"
            min-width="150"
            align="center"
        />
        <!--        <el-table-column-->
        <!--            key="remark"-->
        <!--            label="备注"-->
        <!--            prop="remark"-->
        <!--            min-width="150"-->
        <!--            align="center"-->
        <!--        />-->
        <el-table-column fixed="right" label="操作" align="center" width="220">
          <template #default="scope">
            <el-button
                v-hasPerm="['system:sysDianciFinishedRetrospect:edit']"
                type="primary"
                size="small"
                link
                @click="handleOpenDialog(scope.row.id)"
            >
              <template #icon>
                <Edit/>
              </template>
              编辑
            </el-button>
            <el-button
                v-hasPerm="['system:sysDianciFinishedRetrospect:delete']"
                type="danger"
                size="small"
                link
                @click="handleDelete(scope.row.id)"
            >
              <template #icon>
                <Delete/>
              </template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery()"
      />
    </el-card>

    <!-- 成品追溯表单弹窗 -->
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="800px"
        @close="handleCloseDialog"
    >
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
        <!--        <el-form-item label="操作人" prop="userName">-->
        <!--          <el-input-->
        <!--              v-model="formData.userName"-->
        <!--              placeholder="操作人"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="操作人ID" prop="userId">-->
        <!--          <el-input-->
        <!--              v-model="formData.userId"-->
        <!--              placeholder="操作人ID"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="json数据" prop="json">-->
        <!--          <el-input-->
        <!--              v-model="formData.json"-->
        <!--              placeholder="json数据"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="备注" prop="remark">-->
        <!--          <el-input-->
        <!--              v-model="formData.remark"-->
        <!--              placeholder="备注"-->
        <!--          />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="记录时间" prop="createTime">-->
        <!--          <el-date-picker-->
        <!--              v-model="formData.createTime"-->
        <!--              type="datetime"-->
        <!--              placeholder="记录时间"-->
        <!--              value-format="YYYY-MM-DD HH:mm:ss"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <el-form-item label="批次号" prop="batchNo">
          <el-input
              v-model="formData.batchNo"
               placeholder="批次号"
              clearable
              show-word-limit
              maxlength="64"
          />
        </el-form-item>
        <el-form-item label="工序类型" prop="workType">
          <dict v-model="formData.workType" code="work_type" style="width: 100%"/>
        </el-form-item>
        <!--电极制备-->
        <div v-if="workType===1">
          <div class="text-with-lines">正级材料</div>
          <el-form-item label="材料" prop="zhengjicailiao">
            <el-input
                v-model="formData.zhengjicailiao"
                 placeholder="材料"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <span class="flex flex-wrap gap-4">
          <el-form-item label="粒径" prop="lijing">
            <el-input
                v-model="formData.lijing"
                 placeholder="粒径"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="比表面积" prop="bibiaomianji">
            <el-input
                v-model="formData.bibiaomianji"
                 placeholder="比表面积"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>
          <div class="text-with-lines">负极材料</div>
          <el-form-item label="材料" prop="fujicailiao">
            <el-input
                v-model="formData.fujicailiao"
                 placeholder="材料"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">浆料制备</div>
          <el-form-item label="正极配方" prop="zhengjipeifang">
            <el-input
                v-model="formData.zhengjipeifang"
                 placeholder="正极配方"
                type="textarea"
                clearable
                show-word-limit
                maxlength="150"
            />
          </el-form-item>

          <el-form-item label="负极配方" prop="fujipeifang">
            <el-input
                v-model="formData.fujipeifang"
                 placeholder="负极配方"
                type="textarea"
                clearable
                show-word-limit
                maxlength="150"
            />
          </el-form-item>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="搅拌转速" prop="jiaobanzhuansu">
            <el-input
                v-model="formData.jiaobanzhuansu"
                 placeholder="搅拌转速"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="搅拌时间" prop="jiaobanshijian">
            <el-input
                v-model="formData.jiaobanshijian"
                 placeholder="搅拌时间"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="浆料粘度" prop="jiangliaozhandu">
            <el-input
                v-model="formData.jiangliaozhandu"
                 placeholder="浆料粘度"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>

          <div class="text-with-lines">涂布</div>
          <el-form-item label="正极基材" prop="zhengjijicai">
            <el-input
                v-model="formData.zhengjijicai"
                 placeholder="正极基材"
                type="textarea"
                clearable
                show-word-limit
                maxlength="150"
            />
          </el-form-item>

          <el-form-item label="负极基材" prop="fujijicai">
            <el-input
                v-model="formData.fujijicai"
                 placeholder="负极基材"
                type="textarea"
                maxlength="150"
                clearable
                show-word-limit
            />
          </el-form-item>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="涂布速度" prop="tubusudu">
            <el-input
                v-model="formData.tubusudu"
                 placeholder="涂布速度"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="湿膜厚度" prop="shimohoudu">
            <el-input
                v-model="formData.shimohoudu"
                 placeholder="湿膜厚度"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
            </span>

          <div class="text-with-lines">辊压</div>
          <el-form-item label="设备" prop="shebei">
            <el-input
                v-model="formData.shebei"
                 placeholder="设备"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="正极压实密度" prop="zhengjiyashimidu">
            <el-input
                v-model="formData.zhengjiyashimidu"
                 placeholder="正极压实密度"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="负极压实密度" prop="fujiyashimidu">
            <el-input
                v-model="formData.fujiyashimidu"
                 placeholder="负极压实密度"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="极片厚度" prop="jipianhoudu">
            <el-input
                v-model="formData.jipianhoudu"
                 placeholder="极片厚度"
                style="width: 125px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>

          <div class="text-with-lines">分切与模切</div>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="分切宽度" prop="fenqiekuandu">
            <el-input
                v-model="formData.fenqiekuandu"
                 placeholder="分切宽度"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="模切精度" prop="moqiejingdu">
            <el-input
                v-model="formData.moqiejingdu"
                 placeholder="模切精度"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>

        </div>

        <!--隔膜制备-->
        <div v-if="workType===2">
          <div class="text-with-lines">材料</div>
          <el-form-item label="基材" prop="jicai">
            <el-input
                v-model="formData.jicai"
                 placeholder="基材"
                type="textarea"
                clearable
                show-word-limit
                maxlength="150"
            />
          </el-form-item>

          <el-form-item label="涂层" prop="tuceng">
            <el-input
                v-model="formData.tuceng"
                 placeholder="涂层"
                type="textarea"
                maxlength="150"
                clearable
                show-word-limit
            />
          </el-form-item>
          <div class="text-with-lines">工艺</div>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="孔径" prop="kongjing">
            <el-input
                v-model="formData.kongjing"
                 placeholder="孔径"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="孔隙率" prop="kongxilv">
            <el-input
                v-model="formData.kongxilv"
                 placeholder="孔隙率"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>

          <el-form-item label="涂覆层厚度" prop="tufucenghoudu">
            <el-input
                v-model="formData.tufucenghoudu"
                 placeholder="涂覆层厚度"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
        </div>
        <!--电池组装-->
        <div v-if="workType===3">
          <div class="text-with-lines">组装方式</div>
          <el-form-item label="组装方式" prop="zuzhuangfangshi">
            <el-input
                v-model="formData.zuzhuangfangshi"
                 placeholder="组装方式"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">焊接</div>
          <el-form-item label="焊接方式" prop="hanjiefangshi">
            <el-input
                v-model="formData.hanjiefangshi"
                 placeholder="焊接方式"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="焊接强度" prop="hanjieqiangdu">
            <el-input
                v-model="formData.hanjieqiangdu"
                 placeholder="焊接强度"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">封装</div>
          <el-form-item label="封装方式" prop="fengzhuangfangshi">
            <el-input
                v-model="formData.fengzhuangfangshi"
                 placeholder="封装方式"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="电解液成分" prop="dianjieyechengfen">
            <el-input
                v-model="formData.dianjieyechengfen"
                 placeholder="电解液成分"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <el-form-item label="注液量" prop="zhuyeliang">
            <el-input
                v-model="formData.zhuyeliang"
                 placeholder="注液量"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
        </div>
        <!--化成与老化-->
        <div v-if="workType===4">
          <div class="text-with-lines">化成阶段</div>
          <el-form-item label="SEI膜厚度" prop="seimohoudu">
            <el-input
                v-model="formData.seimohoudu"
                 placeholder="SEI膜厚度"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="SEI膜主要成分" prop="seimozhuyaochengfen">
            <el-input
                v-model="formData.seimozhuyaochengfen"
                 placeholder="SEI膜主要成分"
                type="textarea"
                maxlength="150"
                clearable
                show-word-limit
            />
          </el-form-item>
          <div class="text-with-lines">老化阶段</div>
          <span class="flex flex-wrap gap-4">
            <el-form-item label="环境温度" prop="huanjingwendu">
            <el-input
                v-model="formData.huanjingwendu"
                 placeholder="环境温度"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="静置时间" prop="jingzhishijian">
            <el-input
                v-model="formData.jingzhishijian"
                 placeholder="静置时间"
                style="width: 255px"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          </span>
        </div>
        <!--检测与分选-->
        <div v-if="workType===5">
          <div class="text-with-lines">容量测试</div>
          <el-form-item label="容量偏差" prop="rongliangpiancha">
            <el-input
                v-model="formData.rongliangpiancha"
                 placeholder="容量偏差"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">内阻测试</div>
          <el-form-item label="内阻" prop="neizu">
            <el-input
                v-model="formData.neizu"
                 placeholder="内阻"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">自放电率</div>
          <el-form-item label="自放电率" prop="zifangdianlv">
            <el-input
                v-model="formData.zifangdianlv"
                 placeholder="自放电率"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">循环寿命</div>
          <el-form-item label="循环寿命" prop="xunhuanshouming">
            <el-input
                v-model="formData.xunhuanshouming"
                 placeholder="循环寿命"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
        </div>
        <!--质量控制-->
        <div v-if="workType===6">
          <div class="text-with-lines">原材料检测</div>
          <el-form-item label="材料纯度" prop="cailiaochundu">
            <el-input
                v-model="formData.cailiaochundu"
                 placeholder="材料纯度"
                type="textarea"
                clearable
                maxlength="150"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="隔膜透气度" prop="gemotouqidu">
            <el-input
                v-model="formData.gemotouqidu"
                 placeholder="隔膜透气度"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
          <div class="text-with-lines">过程控制</div>
          <el-form-item label="涂布面密度" prop="tubumianmidu">
            <el-input
                v-model="formData.tubumianmidu"
                 placeholder="涂布面密度"
                type="textarea"
                clearable
                maxlength="512"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="X-Ray检测" prop="xRayjiance">
            <el-input
                v-model="formData.xRayjiance"
                 placeholder="X-Ray检测"
                type="textarea"
                clearable
                maxlength="512"
                show-word-limit
            />
          </el-form-item>
          <div class="text-with-lines">成品检测</div>
          <el-form-item label="热箱测试" prop="rexiangceshi">
            <el-input
                v-model="formData.rexiangceshi"
                 placeholder="热箱测试"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>

          <el-form-item label="针刺测试" prop="zhenciceshi">
            <el-input
                v-model="formData.zhenciceshi"
                 placeholder="针刺测试"
                clearable
                show-word-limit
                maxlength="64"
            />
          </el-form-item>
        </div>
        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="formData.remark"
               placeholder="备注"
              type="textarea"
              clearable
              show-word-limit
              maxlength="150"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit()">确定</el-button>
          <el-button @click="handleCloseDialog()">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "SysDianciFinishedRetrospect",
  inheritAttrs: false,
});

import SysDianciFinishedRetrospectAPI, {
  SysDianciFinishedRetrospectForm,
  SysDianciFinishedRetrospectPageQuery,
  SysDianciFinishedRetrospectPageVO
} from "@/api/system/sys-dianci-finished-retrospect";

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const removeIds = ref<number[]>([]);
const total = ref(0);
const workType = ref(2);

const queryParams = reactive<SysDianciFinishedRetrospectPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 成品追溯表格数据
const pageData = ref<SysDianciFinishedRetrospectPageVO[]>([]);

// 弹窗
const dialog = reactive({
  title: "",
  visible: false,
});

// 成品追溯表单数据
const formData = reactive<SysDianciFinishedRetrospectForm>({});


// 成品追溯表单校验规则
const rules = reactive({
  batchNo: [{required: true, message: "请输入批次号", trigger: "blur"}],
  workType: [{required: true, message: "请输入工序类型", trigger: "blur"}],
  userName: [{required: true, message: "请输入操作人", trigger: "blur"}],
  userId: [{required: true, message: "请输入操作人ID", trigger: "blur"}],
  //==============电极制备
  zhengjicailiao: [{
    required: true, message: "请输入材料", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入材料"));
      }
    }
  }],
  lijing: [{
    required: true, message: "请输入粒径", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入粒径"));
      }
    }
  }],
  bibiaomianji: [{
    required: true, message: "请输入比表面积", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入比表面积"));
      }
    }
  }],
  fujicailiao: [{
    required: true, message: "请输入材料", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入材料"));
      }
    }
  }],
  zhengjipeifang: [{
    required: true, message: "请输入正极配方", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入正极配方"));
      }
    }
  }],
  fujipeifang: [{
    required: true, message: "请输入负极配方", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入负极配方"));
      }
    }
  }],
  jiaobanzhuansu: [{
    required: true, message: "请输入搅拌转速", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入搅拌转速"));
      }
    }
  }],
  jiaobanshijian: [{
    required: true, message: "请输入搅拌时间", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入搅拌时间"));
      }
    }
  }],
  jiangliaozhandu: [{
    required: true, message: "请输入浆料粘度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入浆料粘度"));
      }
    }
  }],
  zhengjijicai: [{
    required: true, message: "请输入正极基材", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入正极基材"));
      }
    }
  }],
  fujijicai: [{
    required: true, message: "请输入负极基材", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入负极基材"));
      }
    }
  }],
  tubusudu: [{
    required: true, message: "请输入涂布速度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入涂布速度"));
      }
    }
  }],
  shimohoudu: [{
    required: true, message: "请输入湿膜厚度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入湿膜厚度"));
      }
    }
  }],
  shebei: [{
    required: true, message: "请输入设备", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入设备"));
      }
    }
  }],
  zhengjiyashimidu: [{
    required: true, message: "请输入正极压实密度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入正极压实密度"));
      }
    }
  }],
  fujiyashimidu: [{
    required: true, message: "请输入负极压实密度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入负极压实密度"));
      }
    }
  }],
  jipianhoudu: [{
    required: true, message: "请输入极片厚度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入极片厚度"));
      }
    }
  }],
  fenqiekuandu: [{
    required: true, message: "请输入分切宽度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入分切宽度"));
      }
    }
  }],
  moqiejingdu: [{
    required: true, message: "请输入模切精度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 1) {
        callback();
      } else {
        callback(new Error("请输入模切精度"));
      }
    }
  }],
  //=============================隔膜制备
  jicai: [{
    required: true, message: "请输入基材", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 2) {
        callback();
      } else {
        callback(new Error("请输入基材"));
      }
    }
  }],
  tuceng: [{
    required: true, message: "请输入涂层", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 2) {
        callback();
      } else {
        callback(new Error("请输入涂层"));
      }
    }
  }],
  kongjing: [{
    required: true, message: "请输入孔径", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 2) {
        callback();
      } else {
        callback(new Error("请输入孔径"));
      }
    }
  }],
  kongxilv: [{
    required: true, message: "请输入孔隙率", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 2) {
        callback();
      } else {
        callback(new Error("请输入孔隙率"));
      }
    }
  }],
  tufucenghoudu: [{
    required: true, message: "请输入涂覆层厚度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 2) {
        callback();
      } else {
        callback(new Error("请输入涂覆层厚度"));
      }
    }
  }],
  // ===========================电池组装
  zuzhuangfangshi: [{
    required: true, message: "请输入组装方式", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入组装方式"));
      }
    }
  }],
  hanjiefangshi: [{
    required: true, message: "请输入焊接方式", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入焊接方式"));
      }
    }
  }],
  hanjieqiangdu: [{
    required: true, message: "请输入焊接强度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入焊接强度"));
      }
    }
  }],
  fengzhuangfangshi: [{
    required: true, message: "请输入封装方式", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入封装方式"));
      }
    }
  }],
  dianjieyechengfen: [{
    required: true, message: "请输入电解液成分", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入电解液成分"));
      }
    }
  }],
  zhuyeliang: [{
    required: true, message: "请输入注液量", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 3) {
        callback();
      } else {
        callback(new Error("请输入注液量"));
      }
    }
  }],
  // ===========================化成与老化
  seimohoudu: [{
    required: true, message: "请输入SEI膜厚度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 4) {
        callback();
      } else {
        callback(new Error("请输入SEI膜厚度"));
      }
    }
  }],
  seimozhuyaochengfen: [{
    required: true, message: "请输入SEI膜主要成分", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 4) {
        callback();
      } else {
        callback(new Error("请输入SEI膜主要成分"));
      }
    }
  }],
  huanjingwendu: [{
    required: true, message: "请输入环境温度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 4) {
        callback();
      } else {
        callback(new Error("请输入环境温度"));
      }
    }
  }],
  jingzhishijian: [{
    required: true, message: "请输入静置时间", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 4) {
        callback();
      } else {
        callback(new Error("请输入静置时间"));
      }
    }
  }],
  // ===========================检测与分选
  rongliangpiancha: [{
    required: true, message: "请输入容量偏差", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 5) {
        callback();
      } else {
        callback(new Error("请输入容量偏差"));
      }
    }
  }],
  neizu: [{
    required: true, message: "请输入内阻", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 5) {
        callback();
      } else {
        callback(new Error("请输入内阻"));
      }
    }
  }],
  zifangdianlv: [{
    required: true, message: "请输入自放电率", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 5) {
        callback();
      } else {
        callback(new Error("请输入自放电率"));
      }
    }
  }],
  xunhuanshouming: [{
    required: true, message: "请输入循环寿命", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 5) {
        callback();
      } else {
        callback(new Error("请输入循环寿命"));
      }
    }
  }],
  // ===========================质量控制
  cailiaochundu: [{
    required: true, message: "请输入材料纯度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入材料纯度"));
      }
    }
  }],
  gemotouqidu: [{
    required: true, message: "请输入隔膜透气度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入隔膜透气度"));
      }
    }
  }],
  tubumianmidu: [{
    required: true, message: "请输入涂布面密度", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入涂布面密度"));
      }
    }
  }],
  xRayjiance: [{
    required: true, message: "请输入X-Ray检测", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入X-Ray检测"));
      }
    }
  }],
  rexiangceshi: [{
    required: true, message: "请输入热箱测试", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入热箱测试"));
      }
    }
  }],
  zhenciceshi: [{
    required: true, message: "请输入针刺测试", trigger: "blur", validator: (rule, value, callback) => {
      if (workType != 6) {
        callback();
      } else {
        callback(new Error("请输入针刺测试"));
      }
    }
  }],
});
if (watch) {
  watch(() => formData.workType, (newVal) => {
    if (newVal == 1) {
      workType.value = 1;
    } else if (newVal == 2) {
      workType.value = 2;
    } else if (newVal == 3) {
      workType.value = 3;
    } else if (newVal == 4) {
      workType.value = 4;
    } else if (newVal == 5) {
      workType.value = 5;
    } else if (newVal == 6) {
      workType.value = 6;
    } else {
      workType.value = 0;
    }
  })
}

/** 查询成品追溯 */
function handleQuery() {
  loading.value = true;
  SysDianciFinishedRetrospectAPI.getPage(queryParams)
      .then((data) => {
        pageData.value = data.list;
        total.value = data.total;
      })
      .finally(() => {
        loading.value = false;
      });
}

/** 重置成品追溯查询 */
function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 打开成品追溯弹窗 */
function handleOpenDialog(id?: number) {
  dialog.visible = true;
  if (id) {
    dialog.title = "修改成品追溯";
    SysDianciFinishedRetrospectAPI.getFormData(id).then((data) => {
      try {
        // 解析 json 字段
        const jsonData = JSON.parse(data.json);
        // 将解析后的数据赋值给 formData
        Object.assign(formData, jsonData);
        formData.id = id;
      } catch (error) {
        console.error("解析 JSON 数据时出错:", error);
        ElMessage.error("解析 JSON 数据时出错");
      }
    });
  } else {
    formData.workType = 0;
    handleSubmitDeal()
    formData.workType = 1;
    dialog.title = "新增成品追溯";
  }
}

/**
 * 提交前将不是改类型的时间变为空
 */
function handleSubmitDeal() {
  if (formData.workType != 1) {
    // 材料
    formData.zhengjicailiao = null;
    // 粒径
    formData.lijing = null;
    // 比表面积
    formData.bibiaomianji = null;
    // 材料
    formData.fujicailiao = null;
    // 正极配方
    formData.zhengjipeifang = null;
    // 负极配方
    formData.fujipeifang = null;
    // 搅拌转速
    formData.jiaobanzhuansu = null;
    // 搅拌时间
    formData.jiaobanshijian = null;
    // 浆料粘度
    formData.jiangliaozhandu = null;
    // 正极基材
    formData.zhengjijicai = null;
    // 负极基材
    formData.fujijicai = null;
    // 涂布速度
    formData.tubusudu = null;
    // 湿膜厚度
    formData.shimohoudu = null;
    // 设备
    formData.shebei = null;
    // 正极压实密度
    formData.zhengjiyashimidu = null;
    // 负极压实密度
    formData.fujiyashimidu = null;
    // 极片厚度
    formData.jipianhoudu = null;
    // 分切宽度
    formData.fenqiekuandu = null;
    // 模切精度
    formData.moqiejingdu = null;
  }
  if (formData.workType != 2) {
    // 基材
    formData.jicai = null;
    // 涂层
    formData.tuceng = null;
    // 孔径
    formData.kongjing = null;
    // 孔隙率
    formData.kongxilv = null;
    // 涂覆层厚度
    formData.tufucenghoudu = null;
  }
  if (formData.workType != 3) {
    // 组装方式
    formData.zuzhuangfangshi = null;
    // 焊接方式
    formData.hanjiefangshi = null;
    // 焊接强度
    formData.hanjieqiangdu = null;
    // 封装方式
    formData.fengzhuangfangshi = null;
    // 电解液成分
    formData.dianjieyechengfen = null;
    // 注液量
    formData.zhuyeliang = null;
  }
  if (formData.workType != 4) {
    // SEI膜厚度
    formData.seimohoudu = null;
    // SEI膜主要成分
    formData.seimozhuyaochengfen = null;
    // 环境温度
    formData.huanjingwendu = null;
    // 静置时间
    formData.jingzhishijian = null;
  }

  if (formData.workType != 5) {
    // 容量偏差
    formData.rongliangpiancha = null;
    // 内阻
    formData.neizu = null;
    // 自放电率
    formData.zifangdianlv = null;
    // 循环寿命
    formData.xunhuanshouming = null;
  }
  if (formData.workType != 6) {
    // 材料纯度
    formData.cailiaochundu = null;
    // 隔膜透气度
    formData.gemotouqidu = null;
    // 涂布面密度
    formData.tubumianmidu = null;
    // X-Ray检测
    formData.xRayjiance = null;
    // 热箱测试
    formData.rexiangceshi = null;
    // 针刺测试
    formData.zhenciceshi = null;
  }
  // 移除值为 null 的属性
  for (const key in formData) {
    if (formData[key] === null) {
      delete formData[key];
    }
  }
}

/** 提交成品追溯表单 */
function handleSubmit() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const id = formData.id;
      console.log("之前的数据",formData)
      //提交前将不是改类型的时间变为空
      handleSubmitDeal()
      formData.json = JSON.stringify(formData);
      if (id) {
        SysDianciFinishedRetrospectAPI.update(id, formData)
            .then(() => {
              ElMessage.success("修改成功");
              handleCloseDialog();
              handleResetQuery();
            })
            .finally(() => (loading.value = false));
      } else {
        console.log("数据",formData)
        SysDianciFinishedRetrospectAPI.add(formData)
            .then(() => {
              ElMessage.success("新增成功");
              handleCloseDialog();
              handleResetQuery();
            })
            .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭成品追溯弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
  formData.id = undefined;
}

/** 删除成品追溯 */
function handleDelete(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
      () => {
        loading.value = true;
        SysDianciFinishedRetrospectAPI.deleteByIds(ids)
            .then(() => {
              ElMessage.success("删除成功");
              handleResetQuery();
            })
            .finally(() => (loading.value = false));
      },
      () => {
        ElMessage.info("已取消删除");
      }
  );
}

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
.text-with-lines {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.text-with-lines::before, .text-with-lines::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 50px); /* 调整线条的宽度以适应文字 */
  height: 1px;
  background-color: #e5e1e1;
}

.text-with-lines::before {
  left: 0;
}

.text-with-lines::after {
  right: 0;
}
</style>

